<template>
    <div>
      <el-card>
        <el-form inline>
          <el-form-item label="搜索关键词:" class="mgb-0">
            <el-input v-model="keywords"></el-input>
          </el-form-item>
          <el-form-item label="请假类型:" class="mgb-0">
            <el-select v-model="type" placeholder="请选择">
              <el-option
                v-for="item in leaveTypeList"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="mgb-0">
            <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
            <el-button type="success" icon="el-icon-refresh" @click="clearSearch"></el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin-top: 10px">
        <el-button type="primary" style="margin-bottom: 10px" @click="openAdd">新增</el-button>
        <el-table border :data="dataList" v-loading="tableLoading">
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column label="用户名" prop="username" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="类型" prop="type" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="开始时间" prop="starttime" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="结束时间" prop="endtime" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="时长" prop="whenlong" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="事由" prop="reason" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center" width="272">
            <template slot-scope="scope">
<!--              <el-button type="text" @click="editItem(scope.row.myleaveId)">编辑</el-button>-->
              <el-button type="text" style="color: red" @click="deleteItem(scope.row.myleaveId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float:right; margin: 10px 0;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 15, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          prev-text="上一页"
          next-text="下一页"
          :total="total">
        </el-pagination>
      </el-card>
<!--      请假新增编辑弹窗-->
      <leave-addEdit v-if="isShowAddEdit"
                     :myleaveId="myleaveId"
                     @close="closeAddEdit"></leave-addEdit>
    </div>
</template>

<script>
  import LeaveApprovalApi from '@/api/applyApproval/LeaveApprovalApi'
  export default {
    name: 'leaveApproval',
    components:{
      LeaveAddEdit: () => import('./components/leaveAddEdit'),
    },
    data(){
      return{
        keywords:'', //
        tableLoading:false,
        type:'',
        leaveTypeList:[],
        dataList:[],
        pageNo: 1, //当前页面
        pageSize: 10, // 当前页数
        total: 0, // 总条数
        isShowAddEdit:false,
        myleaveId:'',
      }
    },
    created(){
      let http = new  LeaveApprovalApi()
      http.getLeaves({}).then(res => {
        for (let i in res.data){
          this.leaveTypeList.push({value: res.data[i]})
        }
      })
      this.getData()
    },
    methods: {
      //获取表格数据源
      getData() {
        this.tableLoading = true
        let data = {
          keywords: this.keywords,
          type: this.type,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        }
        this.getTableListData(new LeaveApprovalApi(), data, 'list').then(res => {
          this.dataList = res.dataList
          this.pageNo = res.pageNo
          this.pageSize = res.pageSize
          this.total = res.total
          this.tableLoading = false
        })
      },
      // 当前页码修改时
      handleCurrentChange(pageNo) {
        this.pageNo = pageNo
        this.getData()
      },
      // 当前页数修改时
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getData()
      },
      //搜索
      searchData() {
        this.pageNo = 1
        this.getData()
      },
      //清空搜索
      clearSearch() {
        this.keywords = ''
        this.type = ''
      },
      //新增请假
      openAdd(){
        this.isShowAddEdit = true
      },
      //编辑请假
      editItem(id){
        this.myleaveId = id
        this.isShowAddEdit = true
      },
      closeAddEdit(){
        this.isShowAddEdit = false
        this.myleaveId = ''
        this.getData()
      },
      //删除
      deleteItem(myleaveId){
        this.$confirm('您确定要删除此项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在删除.....',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          let http = new LeaveApprovalApi()
          http.delete({myleaveId}).then(res => {
            loading.close()
            if(res.code === 200){
              this.$message.success('删除成功！')
              this.getData()
            }else{
              this.$message.error('删除失败！')
            }
          }).catch(err => {
            loading.close()
          })
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      },
    }
  }
</script>

<style scoped>

</style>
